import React from 'react';
import '../assets/style/index.scss';
import logo from "../assets/jpg/logo.png";
import { Menu, Button, Popconfirm } from 'antd';
import Ml from "../assets/json/lanmu.json"
import Lm from "../assets/json/guanli.json"
import {
    PieChartOutlined,
    ExportOutlined,
    MailOutlined, } from '@ant-design/icons';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect
} from "react-router-dom";
import Home from "./home";
import Userlist from "./userlist";
import Releaselist from "./releaselist";
import Yplist from "./yplist";
import Admin from "./admin";
import Carousel from "./carousel";
import Jclist from "./jclist";
import Cdlist from "./cdlist";
import Noticelist from "./noticelist";
import Norole from "./norole";
import EmptyS from "./empty";


const { SubMenu } = Menu;


class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            current: 'zhudao',
            list: Ml,
        }
        this.returnlogin = this.returnlogin.bind(this)
    }
    componentDidMount(){
        const top = localStorage.getItem('topactive')
        if(top == 'lanmu'){
            this.setState({list: Lm})
        }
    }

    handleClick = e => {
        console.log('click ', e);
        this.setState({ current: e.key });
        localStorage.setItem('topactive',e.key)
        if(e.key == "zhudao"){
            this.setState({list: Ml})
        }
        if (e.key == "lanmu"){
            this.setState({list: Lm})
        }
    };
    leftClick = e => {
        console.log('click ', e);
        localStorage.setItem("active",e.key)
        if(e.key == 'home'){
            this.props.history.push("/index/home");
        }
        if (e.key == 'ulist'){
            this.props.history.push("/index/userlist");
        }
        if (e.key == 'releaselist'){
            this.props.history.push("/index/releaselist");
        }
        if (e.key == 'yplist'){
            this.props.history.push("/index/yplist");
        }
        if (e.key == 'adminlist'){
            this.props.history.push("/index/admin");
        }
        if (e.key == 'carousel'){
            this.props.history.push("/index/carousel")
        }
        if (e.key == 'jclist'){
            this.props.history.push("/index/jclist")
        }
        if (e.key == 'cdlist'){
            this.props.history.push("/index/cdlist")
        }
        if (e.key == 'notice'){
            const adm = JSON.parse(localStorage.getItem("admin"))
            if(adm.role == 2){
                this.props.history.push("/index/norole")
            }else {
                this.props.history.push("/index/notice")
            }
        }
        if (e.key == 'lanmu1'){
            this.props.history.push("/index/lanmu1")
        }
        if (e.key == 'lanmu2'){
            this.props.history.push("/index/lanmu2")
        }
    };

    returnlogin(){
        console.info(1)
        localStorage.clear()
        this.props.history.push("/")
    }
    cancel(e) {
        console.log("取消");
    }


    render() {
        const { current } = this.state;
        var siteElements=[];
        const { list } = this.state;
        var group = [];
        list.map((item) => {
            if(!item.children){
                siteElements.push(
                    <Menu.Item key={item.index} icon={<PieChartOutlined />}>
                        {item.name}
                    </Menu.Item>
                )
            }else {
                item.children.forEach((r)=>{
                    group.push(
                        <Menu.Item key={r.index} icon={<PieChartOutlined />}>
                            {r.name}
                        </Menu.Item>
                    )
                })
                siteElements.push(
                    <SubMenu key={item.index} icon={<MailOutlined />} title={item.name}>
                        {group}
                    </SubMenu>
                )
                group = []
            }
        })
        return (
            <div className="index">
                <div className="index-title">
                    <img src={logo} alt=""/>
                    <span>影记app管理系统</span>
                    <Menu onClick={this.handleClick} selectedKeys={[localStorage.getItem('topactive')]} mode="horizontal">
                        <Menu.Item key="zhudao" icon={<MailOutlined />} >
                            主导页
                        </Menu.Item>
                        <Menu.Item key="lanmu" icon={<MailOutlined />}>
                            栏目管理
                        </Menu.Item>
                        <Menu.Item key="fankui" icon={<MailOutlined />}>
                            消息反馈
                        </Menu.Item>
                    </Menu>
                    <div className="leave">
                        <Popconfirm
                            title="确定退出登录?"
                            onConfirm={this.returnlogin}
                            onCancel={this.cancel}
                            okText="Yes"
                            cancelText="No"
                            placement="bottomRight"
                        >
                            <Button type="primary" shape="circle" icon={<ExportOutlined />} />
                        </Popconfirm>

                    </div>
                </div>
                <div className="index-content">
                    <div className="cont-left">
                        <Menu
                            style={{ width: 200 }}
                            defaultSelectedKeys={[localStorage.getItem("active")]}
                            defaultOpenKeys={['user','system','community']}
                            mode="inline"
                            theme="dark"
                            onClick={this.leftClick}
                        >
                            {siteElements}
                        </Menu>
                    </div>
                    <div className="cont-right">
                        <Switch>
                            <Route exact path="/index/home">
                                <Home />
                            </Route>
                            <Route exact path="/index/userlist">
                                <Userlist />
                            </Route>
                            <Route exact path="/index/releaselist">
                                <Releaselist />
                            </Route>
                            <Route exact path="/index/yplist">
                                <Yplist />
                            </Route>
                            <Route exact path="/index/admin">
                                <Admin />
                            </Route>
                            <Route exact path="/index/carousel">
                                <Carousel />
                            </Route>
                            <Route exact path="/index/jclist">
                                <Jclist />
                            </Route>
                            <Route exact path="/index/cdlist">
                                <Cdlist />
                            </Route>
                            <Route exact path="/index/notice">
                                <Noticelist />
                            </Route>
                            <Route exact path="/index/norole">
                                <Norole />
                            </Route>
                            <Route exact path="/index/lanmu1">
                                <EmptyS />
                            </Route>
                            <Route exact path="/index/lanmu2">
                                <EmptyS />
                            </Route>
                        </Switch>
                    </div>
                </div>
                <div className="index-footer"></div>
            </div>
        )

    }
}

export default Index;
